"use client";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { Button, Modal, Space, Table } from "antd";
import type { TableColumnsType, TableProps } from "antd";
import {
  DeleteFilled,
  PlusOutlined,
  RightCircleTwoTone,
  RightOutlined,
} from "@ant-design/icons";
import { del_list, get_list } from "@/app/utils/http";
import axios from "axios";
import { useRouter } from "next/navigation";
import MyForm from "./myForm/page";

type TableRowSelection<T extends object = object> =
  TableProps<T>["rowSelection"];

// 删除
//   const del=(index)=>{
// dataSource.filter(item=>{

// })
//   }
export default function Home() {
 let [title,setTitle]=useState('')
  const [dataSource, setData] = useState([]);
  useEffect(() => {
    function getList() {
      get_list().then((res) => {
        setData(res);
      });
    }
    getList();
  }, []);
  // 删除
  async function del(id) {
    try {
      await del_list(id);
      const newData = dataSource.filter((item) => item.id !== id);
      setData(newData);
    } catch (error) {
      console.log("删除失败：", error);
    }
  }
  const columns: TableColumnsType<DataType> = [
    {
      title: "关联订单",
      dataIndex: "title",
    },
    {
      title: "订单归属人",
      dataIndex: "name",
    },
    {
      title: "回款期次",
      dataIndex: "date",
    },
    {
      title: "计划回款金额",
      dataIndex: "price",
    },
    {
      title: "已回款金额",
      dataIndex: "prices",
    },
    {
      title: "计划回款日期",
      dataIndex: "day",
    },
    {
      title: "回款状态",
      dataIndex: "state",
      render: (state) => {
        if (state == 1) {
          return "已完成";
        } else if (state == 0) {
          return "未完成";
        } else {
          return "已逾期";
        }
      },
    },
    {
      title: "操作",
      render: (_, record) => (
        <Space size="middle">
          <span style={{ color: "#1E90FF" }} onClick={() => {
            showModal()
            setTitle('编辑')
          }}>
            <RightCircleTwoTone />
            详情
          </span>

          <span
            style={{ color: "#1E90FF" }}
            onClick={() => {
              del(record.id);
            }}
          >
            <DeleteFilled style={{ color: "#1E90FF" }} />
            删除
          </span>
        </Space>
      ),
    },
  ];

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };


  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <Button onClick={() => {
        showModal()
        setTitle('添加')
      }}>
        <PlusOutlined />
        添加
      </Button>
      <Modal
        title={title}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <MyForm   onCancel={handleCancel} key={new Date().getTime()}/>
      </Modal>
      <Table<DataType>
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
        key={"id"}
      />
    </div>
  );
}
